<!doctype html>
<html>
<head>
<title>Car assist</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>body { padding: 0; margin: 0; background: #F0F0F0 }</style>
</head>
<body>
<p>
<canvas id="hpa"></canvas>
<canvas id="hpb"></canvas>
</p>
<script src="../gauge.min.js"></script>
<script>
var myHighlightsHP = [
{ from: 0, to: 40, color: 'rgba(0,0,255,.8)'},
{ from: 400, to: 450, color: 'rgba(255,0,0,.8)'}
];
var myMajorTicksHP = ['0', '100', '200', '300', '400', '450'];
var myCommonProp = {
width: 150,
height: 150,
value: 1,
colorPlate: '#F0F0F0',
colorMajorTicks: '#222',
colorMinorTicks: '#222',
colorTitle: '#222',
colorUnits: '#222',
colorNumbers: '#222',
colorNeedle: 'rgba(240, 128, 128, 1)',
colorNeedleEnd: 'rgba(255, 160, 122, .9)',
valueBox: false
};
var myAnimation = {
animationRule: 'decycle',
animationDuration: 500
};
var myCommonPropHP=Object.assign({},
myCommonProp,
myAnimation,
{
units:'BAR',
minValue:0, maxValue:450,
majorTicks:myMajorTicksHP,
highlights:myHighlightsHP
}
);
var hpaConfig = Object.assign({},
{ renderTo: 'hpa', title: 'HPA' },
myCommonPropHP
);
var hpbConfig = Object.assign({},
{ renderTo: 'hpb', title: 'HPB' },
myCommonPropHP
);
var gaugeHpa = new RadialGauge(hpaConfig);
var gaugeHpb = new RadialGauge(hpbConfig);
function onRender() {
console.log(this._value, this.value);
}
gaugeHpa.on('render', onRender);
gaugeHpb.on('render', onRender);
gaugeHpa.draw();
gaugeHpb.draw();
setInterval(function() {
gaugeHpa.value = 0;
gaugeHpb.value = 0;
}, 50);
</script>
</body>
</html>